<template>
	<view class="sx">
		<scroll-view scroll-x style="height: 40px">
			<view class="sx-box">
				<view class="sx-box-item" :class="{active: currentIndex3 === 0}" @click="changeTab3(0)">
					<text>综合</text>
				</view>
				<view class="sx-box-item" :class="{active: currentIndex3 === 1}" @click="changeTab3(1)">
					<text>销量</text>
					<!-- <view class="sx-box-icon">
						<template v-if="currentIndex3 === 1">
							<image src="/pagesShop/static/sf2-1.png" mode="widthFix"></image>
							<image src="/pagesShop/static/sf1-1.png" mode="widthFix"></image>
						</template>
						<template v-else>
							<image src="/pagesShop/static/sf2.png" mode="widthFix"></image>
							<image src="/pagesShop/static/sf1.png" mode="widthFix"></image>
						</template>
					</view> -->
				</view>
				<view class="sx-box-item" :class="{active: currentIndex3 === 2}" @click="changeTab3(2)">
					<text>价格</text>
					<view class="sx-box-icon">
						<template v-if="currentIndex3 === 2">
							<template v-if="sortx === 1">
								<image src="/pagesShop/static/sf2.png" mode="widthFix"></image>
								<image src="/pagesShop/static/sf1-1.png" mode="widthFix"></image>
							</template>
							<template v-else>
								<image src="/pagesShop/static/sf2-1.png" mode="widthFix"></image>
								<image src="/pagesShop/static/sf1.png" mode="widthFix"></image>
							</template>
						</template>
						<template v-else>
							<image src="/pagesShop/static/sf2.png" mode="widthFix"></image>
							<image src="/pagesShop/static/sf1.png" mode="widthFix"></image>
						</template>
					</view>
				</view>
				<view class="sx-box-item" v-if="isFilt" @click="openFilter">
					<text>筛选</text>
					<view class="sx-box-icon">
						<image class="sbi1" src="/pagesShop/static/ff.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="sx-box-item" @click="changeTab4(row_type)">
					<image v-if="row_type === 'row'" src="/pagesShop/static/f1.png" mode="widthFix"></image>
					<image v-else src="/pagesShop/static/f2.png" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			isFilt:{
				type: Boolean,
				default(){
					return true
				}
			}
		},
		data() {
			return {
				currentIndex3: 0,
				row_type: 'table',
				sortx: 1,
			}
		},
		methods:{
			openFilter() {
				this.$emit('open-filter')
			},
			// 排序：切换类型
			changeTab3(index) {
				this.currentIndex3 = index
				if(index === 2) {
					this.sortx = this.sortx === 1 ? 0 : 1
				} else {
					this.sortx = 1
				}
				this.$emit('type-change',{
					index,
					sort: this.sortx
				})
			},
			// 排版：切换
			changeTab4(row_type) {
				this.row_type = row_type === 'row' ? 'table' : 'row'
				this.$emit('row-change',this.row_type)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.sx-box {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.sx-box-item {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 1;
	
		&>image {
			width: 36rpx;
			height: auto;
		}
	
		&.active {
			color: $blue;
		}
	}
	
	.sx-box-icon {
		width: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	
		image {
			width: 20rpx;
			height: auto;
	
			&:nth-of-type(1) {
				margin-bottom: 4rpx;
			}
		}
	
		.sbi1 {
			width: 25rpx;
		}
	}
</style>
